@import "font.css";
@import "element-ui.scss";
@import "font/iconfont.css";

* {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1600px) {
  html {
    font-size: 8px !important;
  }
}

@media screen and (max-width: 1400px) {
  html {
    font-size: 7px !important;
  }
}

@media screen and (min-width: 2500px) {
  html {
    font-size: 15px !important;
  }
}

@media screen and (min-width: 3000px) {
  html {
    font-size: 20px !important;
  }
}

.case {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.rotate {
  transform: rotate(180deg);
}

.flexs {
  display: flex
}

.flexL {
  display: flex;
  align-items: baseline;
}

.flexLc {
  display: flex;
  align-items: center; //上下居中
}

.flexsLc {
  display: flex;
  justify-content: center; //左右居中
}


.flexLcc {
  display: flex;
  align-items: center; //上下居中
  justify-content: center; //左右居中
}

.flexLr {
  display: flex;
  align-items: center; //上下居中
  justify-content: space-between; //两端对齐
}

.flexX {
  display: flex;
  justify-content: space-between; //两端对齐
}

.flexXt {
  display: flex;
  align-items: baseline;
  justify-content: space-between; //两端对齐
}

.flexY {
  display: flex;
  flex-direction: column; //上下Flex
}

.flexYcc {
  display: flex;
  flex-direction: column; //上下Flex
  justify-content: center; //左右居中
  align-items: center; //上下居中
}

//循环
$length: 300;

@for $i from 0 to $length+1 {
  .mt#{$i} {
    margin-top: #{$i}px !important;
  }

  .mb#{$i} {
    margin-bottom: #{$i}px !important;
  }

  .ml#{$i} {
    margin-left: #{$i}px !important;
  }

  .mr#{$i} {
    margin-right: #{$i}px !important;
  }

  .mv#{$i} {
    margin: #{$i}px 0 !important;
  }

  .mh#{$i} {
    margin: 0 #{$i}px !important;
  }

  .m#{$i} {
    margin: #{$i}px !important;
  }

  .pt#{$i} {
    padding-top: #{$i}px !important;
  }

  .pb#{$i} {
    padding-bottom: #{$i}px !important;
  }

  .pl#{$i} {
    padding-left: #{$i}px !important;
  }

  .pr#{$i} {
    padding-right: #{$i}px !important;
  }

  .p#{$i} {
    padding: #{$i}px !important;
  }

  .pv#{$i} {
    padding: #{$i}px 0 !important;
  }

  .ph#{$i} {
    padding: 0 #{$i}px !important;
  }

  @for $l from 0 to $length+1 {
    .pt#{$i}-#{$l} {
      padding: #{$i}px #{$l}px !important;
    }
  }

  .f#{$i} {
    font-size: #{$i}px !important;
  }
}

// 美化div滚动条
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(127, 125, 125, 0.4);
}

.head {
  width: 100%;
  height: 140px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

// 大按钮
.big_btn {
  padding: 20px 80px;
  height: auto;
  border-radius: 10px;

  span {
    font-size: 24px;
  }
}

// 跳转文字
.a_label {
  color: #3F61F1;
  cursor: pointer;
  position: absolute;
  bottom: -30px;
  left: 350px;
  white-space: nowrap;

  i {
    margin-left: 5px;
  }
}

h1 {
  font-size: 56px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 15px;
}

p {
  font-size: 15px;
}
